<template>
  <div class="home-colors-canvas">
    <canvas class="canvas"></canvas>
  </div>
</template>
<script setup>
import {onMounted} from 'vue';
import * as Three from 'three';
onMounted(() => {
  const canvas = document.getElementsByClassName('canvas')[0];
  const gl = canvas.getContext('webgl');
  const color = new Three.Color('rgba(255,0,0,1)');
  !(function ani() {
    // 设置颜色偏移：色相，饱和度，亮度
    color.offsetHSL(0.002, 0, 0);
    // 声明颜色
    gl.clearColor(color.r, color.g, color.b, 1);
    // 刷底色
    gl.clear(gl.COLOR_BUFFER_BIT);
    requestAnimationFrame(ani);
  })();
});
</script>
<style lang="scss">
.home-colors-canvas {
  .canvas {
    width: 100%;
    height: 100%;
  }
}
</style>